<!-- prettier-ignore -->
<template>
  <div>
    <el-form label-width="80px">
      <h2>天地图</h2>
      <el-form-item label="token">
        <el-input v-model="tiandituSet.token"></el-input>
      </el-form-item>
      <h2>自定义</h2>
      <el-form-item label="启用">
        <div class="custom-table">
          <el-table  :data="customBaseMap" border @select="tableSelect">
            <el-table-column align="center" type="selection" width="55"></el-table-column>
            <el-table-column align="center" label="名称" prop="name" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="url" prop="url" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="操作" width="55">
              <template slot-scope="scope">
                <el-popconfirm cancel-button-text='取消' confirm-button-text='确定' icon="el-icon-info" icon-color="red" title="确定删除该配置吗？"
                               @confirm="removeCustomUrl(scope.$index)">
                  <i slot="reference" class="el-icon-circle-close" style="font-size: 16px;cursor: pointer"></i>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form-item>
      <el-form-item class="submit-btn">
        <el-button type="primary" @click="addDialogShow = true">添加</el-button>
      </el-form-item>
      <h2>其他</h2>
      <el-form-item label="地形">
        <el-switch v-model="otherSet.terrainShow">
        </el-switch>
      </el-form-item>
    </el-form>
    <add-base-map v-if="addDialogShow" @addUrl="setUrl" @cancel="addDialogShow = false"></add-base-map>
  </div>
</template>

<script>
import addBaseMap from './addBaseMap.vue';
export default {
  name: 'baseMapSet',
  props:{
    settings:{
      type:Object,
      default:()=>null
    }
  },
  components:{
    addBaseMap
  },
  computed:{
    tiandituSet:{
      get(){
        return this.settings.engineering.baseMap.tianditu
      },
      set(val){
        this.settings.engineering.baseMap.tianditu = val
        this.$emit('settings:update',this.settings)
      }
    },
    customBaseMap:{
      get(){
        return this.settings.engineering.baseMap.custom
      },
      set(val){
        this.settings.engineering.baseMap.custom = val
        this.$emit('settings:update',this.settings)
      }
    },
    otherSet:{
      get(){
        return this.settings.engineering.baseMap.other
      },
      set(val){
        this.settings.engineering.baseMap.other = val
        this.$emit('settings:update',this.settings)
      }
    }
  },
  data(){
    return{
      addDialogShow: false
    }
  },
  methods:{
    tableSelect(selection,row){
      row.isCheck = !row.isCheck
    },
    setUrl(urlObj){
      this.addDialogShow = false
      this.customBaseMap.push({...urlObj,isCheck:false})
    },
    removeCustomUrl(index){
      this.customBaseMap.splice(index,1)
    }
  }
};
</script>

<style lang="less" scoped>
h2{
  color: #fff;
  margin:10px 0
}
.custom-table{

  /deep/ .el-table{
    border:1px solid #459bec;
    background-color:#173147cc;
  }
  /deep/ tr{
    background-color: rgba(255,255,255,0);
  }
  /deep/ th.el-table__cell{
    background-color:#173147cc;
    .cell{
      color: #fff
    }
  }
  /deep/ .el-table__empty-text{
    color:#fff
  }
  /deep/ th.el-table__cell.is-leaf{
    border:1px solid #459bec;
  }
  /deep/ .el-table--border::after, .el-table--group::after, .el-table::before{
    background-color:#459bec;
  }
  /deep/td.el-table__cell div{
    color:#fff
  }
  /deep/.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
    background: rgba(255,255,255,0.1);
  }
  /deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
    border:1px solid #459bec;
  }
}
</style>